<template>
    <div>
        <TabBar :title="videoTitle" />
        <div class='demo'>
            <video-player class="video-player vjs-custom-skin"
                          ref="videoPlayer"
                          :playsinline="true"
                          :options="playerOptions">
            </video-player>
        </div>
        <div class="video_info">
            <div class="title_video">{{videoTitle}}</div>
            <div class="describe_video">{{videoDescribe}}</div>
            <div class="videoNum">
                <span class="icon iconfont">&#xe60b;</span>
                {{videoNum}}万
            </div>

        </div>

        <div class="video_otherInfo">
            <div class="top_otherInfo">
                <img :src="providerIcon" class="provider_img">
                <div class="provider_name">{{providerName}}</div>
                <div class="provider_date">{{providerDate}}</div>
            </div>
            <div class="bottom_otherInfo">
                <div>
                    <span class="icon iconfont">&#xe630;</span>
                    {{collectionCount}}
                </div>
                <div>
                    <span class="icon iconfont">&#xe60c;</span>
                    {{replyCount}}
                </div>
                <div>
                    <span class="icon iconfont" >&#xe637;</span>
                    {{shareCount}}
                </div>
                <div style="color: #2196f3">
                    <span class="icon iconfont" style="font-size:0.9em;">&#xe601;</span>
                    缓存
                </div>
            </div>
        </div>

        <div class="relevantVideo">
            <div class="relevantVideo_title">相关视频</div>
            <div class="list_relevantVideo">
                <div class="pre_tagging" v-for="item in relevantList" :id="item.data.id" @click="enterElevantVideo(item.data,item.data.id)">
                    <img class="tagging_img" :src="item.data.cover.detail">
                    <div class="tagging_title">{{item.data.title}}</div>
                    <div class="tagging">来源：{{item.data.provider.name}}</div>
                </div>
            </div>
        </div>
    </div>



</template>

<script>
    import TabBar from '@/components/home/headNav'
    export default {
        name: "listDetails",
        components:{
            TabBar
        },
        data() {
            return {
                relevantList:[],
                collectionCount:'',
                replyCount:'',
                shareCount:'',
                providerIcon:'',
                providerName:'',
                providerDate:'',
                videoNum:'',
                videoTitle:'',
                videoDescribe:'',
                playerOptions: {
                    //播放速度
                    playbackRates: [0.5, 1.0, 1.5, 2.0],
                    //如果true,浏览器准备好时开始回放。
                    autoplay: false,
                    // 默认情况下将会消除任何音频。
                    muted: false,
                    // 导致视频一结束就重新开始。
                    loop: false,
                    // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
                    preload: 'auto',
                    language: 'zh-CN',
                    // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                    aspectRatio: '16:9',
                    // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                    fluid: true,
                    sources: [{
                        //类型
                        type: "video/mp4",
                        //url地址
                        src: ''
                    }],
                    //你的封面地址
                    poster:'',
                    //允许覆盖Video.js无法播放媒体源时显示的默认信息。
                    notSupportedMessage: '此视频暂无法播放，请稍后再试',
                    controlBar: {
                        timeDivider: true,
                        durationDisplay: true,
                        remainingTimeDisplay: false,
                        //全屏按钮
                        fullscreenToggle: true
                    }
                }

            }
        },
        created(){

        },
        methods:{
            getParamsDatas(){
                let _self =this;
                let datas = _self.$route.params.prmData;
                let Id =  _self.$route.params.prmId;
                _self.getVideoDatas(datas);//获取视频数据
                _self.getRelevantDatas(Id);//获取相关视频
            },
           getVideoDatas(datas){
               let _self =this;
               console.log(datas);
               _self.playerOptions.sources[0].src = datas.playUrl;//播放地址
               _self.playerOptions.poster = datas.cover.detail;
               _self.videoTitle = datas.title;//标题
               _self.videoDescribe = datas.description;//详细描述
               _self.videoNum = datas.duration;//播放次数
               if(datas.provider.icon==""){
                   _self.providerIcon ='http://img.kaiyanapp.com/b968890a2b3e9ab5ae234175681f8cd4.png'

               }else{
                   _self.providerIcon = datas.provider.icon;//提供者图标
               }
               _self.providerName = datas.provider.name;//提供者名称
               _self.collectionCount = datas.consumption.collectionCount;//收藏
               _self.replyCount = datas.consumption.replyCount;//点赞
               _self.shareCount = datas.consumption.shareCount;//转发
               _self.timeFormat(datas.releaseTime);//转换时间戳
           },
            getRelevantDatas(Id){
                let _self =this;
                console.log(Id)
                this.$axios({
                    method:'get',
                    url:'https://api.apiopen.top/videoRecommend?id='+Id,
                    data:this.qs.stringify({    //这里是发送给后台的数据
                        /*id:_self.$route.params.prmData,*/
                    })
                }).then((response) =>{
                    let lists = response.data.result;
                    console.log(lists);
                    for(var i=0;i<lists.length;i++){
                        if(lists[i].type == "videoSmallCard"){
                            _self.relevantList.push(lists[i]);
                        }
                    }

                }).catch((error) =>
                    console.log(error)       //请求失败返回的数据
                )
            },
           timeFormat(nS) {
                let _self =this;
                let date = new Date(parseInt(nS)) // 时间戳为10位需乘1000，为13位则不用

                let Y = date.getFullYear() // 年
                let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) // 月
                let D = date.getDate() < 10 ? '0' + date.getDate() + '' : date.getDate() + '' // 日

                let h = date.getHours() < 10 ? '0' + date.getHours() : date.getHours() // 时
                let m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes() // 分
                let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds() // 秒
               _self.providerDate = Y + '年' + M + '月' + D + '日 ' + h + '时' + m + '分' + s+'秒';


         },
            enterElevantVideo(datas,Id){
                let _self =this;
                _self.getVideoDatas(datas);
                _self.getRelevantDatas(Id);

                let top = document.documentElement.scrollTop || document.body.scrollTop;
                // 实现滚动效果
                const timeTop = setInterval(() => {
                    document.body.scrollTop = document.documentElement.scrollTop = top -= 50;
                    if (top <= 0) {
                        clearInterval(timeTop);
                    }
                }, 10);

            }
      },
        mounted() {
            let _self =this;
            _self.getParamsDatas();
        }
    }
</script>

<style >
    .demo{
        display: inline-block;
        width:100%;
        height:100%;
        text-align: center;
        line-height: 100px;
        overflow: hidden;
        position: relative;
        left:0px;
        top:44px;
    }

    .demo:hover{
        display: block;
    }
    .video_info{
        width:100%;
        height:auto;
        padding:3% 3%;
        float:left;
        margin-top:44px;
        background: #fff;
        text-align: left;
    }
    .title_video{
        font-size:1em;
        color:#555;

    }
    .describe_video{
        font-size:0.8em;
        color:#979797;
    }
    .videoNum{
        font-size:0.8em;
        color:#979797;
    }
    .video_otherInfo{
        width:100%;
        height:auto;
        padding:3% 3%;
        float:left;
        margin-top: 10px;
        background: #fff;
        text-align: left;
    }
    .top_otherInfo{
        width:100%;
        height:auto;
        float:left;
        padding-bottom:5px;
        border-bottom:solid 1px #efefef
    }
    .bottom_otherInfo{
        width:100%;
        height:auto;
        display: flex;

    }
    .bottom_otherInfo  div{
        height:40px;
        line-height: 40px;
        flex: 1;
        text-align: center;
        color:#979797;
        font-size:1em;
    }
    .provider_img{
        border:none;
        width:60px;
        height:60px;
        float:left;
        border-radius:50%;
    }
    .provider_name,
    .provider_date{
        width:75%;
        float: left;
        margin-top:8px;
        margin-left:2%;
        color:#979797;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .relevantVideo{
        width:100%;
        height:auto;
        float:left;
        padding:3% 3%;
    }
    .relevantVideo_title{
        width:100%;
        height:30px;
        line-height:30px;
        text-align: left;
        font-size:1em;
        font-weight: 500;
    }
    .list_relevantVideo{
        width:100%;
        float:left;
    }
    .list_relevantVideo .pre_tagging{
        width:100%;
        height:100px;
        float:left;
        background:#fff;
        border-radius:10px;
        margin-bottom:10px;
    }
    .tagging_img{
        width:90px;
        height:80px;
        float:left;
        background:#fff;
        border-radius:10px;
        margin:5px;
    }
    .tagging,
    .tagging_title{
        width:60%;
        line-heigth:22px;
        float:left;
        color:#979797;
        margin:20px 20px 0 0;
        text-align: left;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }



</style>